import React, { useState } from 'react';
import ArrowPathIcon from './icons/ArrowPathIcon';

interface HeaderProps {
  totalBalance: number;
  onRefresh: () => void;
  currencyCode: string;
}

const Header: React.FC<HeaderProps> = ({ totalBalance, onRefresh, currencyCode }) => {
  const [isRefreshing, setIsRefreshing] = useState(false);

  const handleRefreshClick = () => {
    setIsRefreshing(true);
    onRefresh();
    // The parent component will set loading to false, but this provides a fallback animation
    setTimeout(() => setIsRefreshing(false), 1000); 
  };

  const formattedBalance = new Intl.NumberFormat('zh-CN', {
    style: 'currency',
    currency: currencyCode,
    minimumFractionDigits: 2,
    maximumFractionDigits: 2,
  }).format(totalBalance);

  return (
    <header className="sticky top-0 z-20 bg-slate-900/80 backdrop-blur-md p-4">
      <div className="flex justify-between items-center">
        <div>
          <p className="text-sm text-slate-400">总余额</p>
          <p className="text-3xl font-bold text-white tracking-tight">{formattedBalance}</p>
        </div>
        <div className="flex items-center space-x-2">
          <button 
            onClick={handleRefreshClick} 
            className="p-2 text-slate-400 hover:text-white transition-colors"
            aria-label="刷新数据"
          >
            <ArrowPathIcon className={`h-6 w-6 transition-transform duration-1000 ${isRefreshing ? 'rotate-[360deg]' : ''}`} />
          </button>
        </div>
      </div>
    </header>
  );
};

export default Header;